<!-- 商品分类 -->
<template>
	<div class='container'>
		<div class='head search-box'>
      <a @click="goBack()">
			  <van-icon name="arrow-left" class='floatLeft icon1' />
      </a>
			<van-search class='floatLeft' style='width:6.3rem;' placeholder="请输入搜索关键词" v-model="searchVal" />
			<van-icon name="more-o" class='floatRight icon2'/>
		</div>
		<div class='classify-container'>
			<div class='classify-left floatLeft'>
				<ul>
					<li v-for="(item,index) in classifyList" :key='index' :class='{"active":classifyActive == index}' @click="getGoodsList(index)">{{item.name}}</li>
				</ul>
			</div>
			<div class='classify-right floatRight'>
				<h3>{{classifyList[classifyActive].name}}</h3>
				<div class='goods-classify-main'>
					<van-row>
					  	<van-col span="8" v-for="(item,index) in goodsList" :key='index'>
					  		<div class='goods-classify-item' @click="Details(item.category_name)">
					  			<img :src="item.img">
					  			<p class='goods-classify-name'>{{item.category_name}}</p>
					  		</div>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
  import request from '../../static/request.js'
	import img1 from "@/assets/phone.png"
	export default{
		data(){
			return {
				searchVal:'', //搜索字段
				classifyActive:0,
				classifyList:[
					{
						name:'推荐专区',
						id:1
					},
					{
						name:'美妆系列',
						id:2
					},
					{
						name:'食品系列',
						id:3
					},
					{
						name:'生鲜专区',
						id:4
					},
					{
						name:'服饰鞋包',
						id:5
					},
					{
						name:'居家百货',
						id:6
					},
					{
						name:'数码家电',
						id:7
					},
					{
						name:'洗护系列',
						id:8
					},
					{
						name:'婴童专区',
						id:9
					},
					{
						name:'办公用品',
						id:10
					},
					{
						name:'运动户外',
						id:11
					},
					{
						name:'宠物生活',
						id:12
          },
          {
						name:'运动户外',
						id:11
					},
					{
						name:'宠物生活',
						id:12
					}
				],
				goodsList:[
					{
						id:1,
						category_name:'洗面奶',
						img:img1
					}
				],
				img1:img1
			}
    },
    created(){
      request({
        url:'?controller=theapi&action=goods_list',
        method: 'get',
        params: {
        }
      }).then(res=>{
        console.log(res);
        this.goodsList = res.data.data;
        // this.listarr = res.data.data;
        // this.id = this.listarr.id;
      });
    },
		methods:{
			getGoodsList(index){
        this.classifyActive = index;
        let id = this.classt(index);
        console.log(id)
        if(id != ''){
          request({
            url:'?controller=theapi&action=goods_list',
            method: 'get',
            params: {
              cid: id
            }
          }).then(res=>{
            console.log(res);
            this.goodsList = res.data.data;
          });
        }
      },
      classt(n){
        switch(n)
          {
          case 0:
            return 1;
            break;
          case 1:
            return 1;
            break;
          case 2:
            return '';
            break;
          case 3:
            return '';
            break;
          case 4:
            return 2;
            break;
          case 5:
            return '';
            break;
          case 6:
            return 3;
            break;
          default:
          }
      },
      Details(category_name){
      console.log(category_name)
        this.$router.push({
          name:'Second-class',
          params:{
            name: category_name,
            page:3
          }
        })
      },
      goBack(){
        this.$router.go(-1)
      }
		}
	}
</script>

<style>

	.search-box .van-cell{
		font-size: 0.28rem;
		color: #B3B5B8;
		line-height: 0.7rem;
	}
	.search-box .van-icon{
		font-size: 0.5rem;
		vertical-align: middle;
		line-height: 0.7rem;
	}

</style>
<style scoped>
.head{
	width: 100%;
	height:1.08rem;
  display: flex;
}
.search-box{
	vertical-align: middle;
	/* padding:0 0.1rem; */
}
.search-box .icon1{
	/*font-size: 30px;*/
	line-height: 1.08rem;
	vertical-align: middle;
	color: #aaa;
}
.search-box .icon2{
	/*font-size: 30px;*/
	line-height: 1.08rem;
	vertical-align: middle;
	color: #C5C7CE;
}

.classify-container{
	width: 100%;
	/* width:750px; */
	height: calc(100% - 1.08rem);
	overflow: hidden;
	border-top:0.01rem solid #E8EBEE;
  display: flex;
}
.classify-left{
	width: 1.5rem;
	height: 100%;
	overflow-y:auto;
	border-right:0.01rem solid #E8EBEE;
}
.classify-left ul li{
	font-size:0.26rem;
	color: #9FA0A5;
	font-family:PingFang-SC-Medium;
	font-weight:500;
	line-height: 0.26rem;
	text-align: center;
	margin: 0.2rem 0 0.6rem;
}
.classify-left ul .active{
	color: #191E2A;
	border-left:0.06rem solid #F52E67;
}
.classify-right{
	width: 6rem;
	height: 100%;
	overflow-y:auto;
}
.classify-right h3{
	font-size:0.28rem;
	font-family:PingFang-SC-Bold;
	font-weight:bold;
	color:rgba(25,30,42,1);
	line-height: 1.3rem;
	text-align: center;
}
.goods-classify-item{
	text-align: center;
  margin-bottom: 0.4rem;
  height: 1.5rem;
}
.goods-classify-item img{
	width: 0.94rem;
	height: 0.94rem;
	border-radius:0.47rem;
}
.goods-classify-name{
	font-size:0.24rem;
	font-family:PingFang-SC-Medium;
	font-weight:500;
	color:rgba(159,160,165,1);
	line-height: 0.5rem;
}
</style>
